<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能保险箱</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="defaultState">
    <button onclick="openDoorWithPassword()">Open Door with Password</button>
    <button onclick="openDoorWithCard()">Open Door with Card</button>
    <button onclick="enterFunction2()">Enter Function 2</button>
    <button onclick="enterFunction3()">Enter Function 3</button>
    <button onclick="enterFunction4()">Enter Function 4</button>
</div>

<div id="function2State" style="display: none;">
    <input type="password" id="oldPassword" placeholder="Old Password">
    <button onclick="confirm()">confirm</button>
    <button onclick="cancel()">Cancel</button>
</div>

<div id="function2" style="display: none;">
    <input type="password" id="newPassword" placeholder="New Password">
    <button onclick="addPassword()">Add Password</button>
</div>

<div id="function3State" style="display: none;">
    <input type="password" id="password3" placeholder="Password">
    <button onclick="addCard()">Add Card</button>
    <button onclick="removeCard()">Remove Card</button>
    <button onclick="cancel()">Cancel</button>
</div>

<div id="function4State" style="display: none;">
    <input type="password" id="password4" placeholder="Password">
    <button onclick="enableAlarm()">Enable Alarm</button>
    <button onclick="disableAlarm()">Disable Alarm</button>
</div>

<div id="alarmState" style="display: none;">
    <p>Alarm is triggered! Please confirm the situation to deactivate the alarm.</p>
</div>

<!-- 添加一个密码输入框，默认隐藏 -->
<div id="passwordPrompt" style="display:none;">
    <input type="password" id="passwordInput" placeholder="Enter Password">
    <button onclick="inputPassword()">Input Password</button>

</div>



<script>
    alarmTriggered=false;
    const defaultPassword='000000';
    let passwordsArray = [];
    function openDoorWithPassword() {
        if (alarmTriggered) {
            // 如果报警触发，则需要确认情况
            document.getElementById("defaultState").style.display = "none";
            document.getElementById("alarmState").style.display = "block";
        } else {
            checkPassword();
        }
    }
    function checkPassword() {
        // 显示密码输入提示框
        document.getElementById('passwordPrompt').style.display = 'block';
    }
    function inputPassword() {
        var password = document.getElementById('passwordInput').value;
        if(password === defaultPassword) {
            alert('Door opened!');
            document.getElementById('passwordPrompt').style.display = 'none';
        } else {
            alert('Incorrect password!');
            document.getElementById('passwordPrompt').style.display = 'none';
        }
    }
    function openDoorWithCard() {
        alert('Door opened!');
    }


    function enterFunction2() {
        document.getElementById("defaultState").style.display = "none";
        document.getElementById("function2State").style.display = "block";
    }
    function confirm() {
        var password = document.getElementById('oldPassword').value;
        if(password === defaultPassword){
            document.getElementById("function2State").style.display = "none";
            document.getElementById("function2").style.display = "block";
        }else{
            alert('Incorrect password!');
        }
    }
    function addPassword() {
        const newpassword = document.getElementById('newPassword').value;
        if (passwordsArray.length < 5 && newpassword !== '' && newpassword !== defaultPassword) {
            passwordsArray.push(newpassword);
            alert('New password added successfully!');
        } else {
            // 数组已满，移除第一个密码，然后添加新密码
            passwordsArray.shift(); // 移除数组的第一个元素
            passwordsArray.push(newpassword);
            alert('Oldest password removed and new password added.');
        }
    }


    function enterFunction3() {
        document.getElementById("defaultState").style.display = "none";
        document.getElementById("function3State").style.display = "block";
    }

    function enterFunction4() {
        document.getElementById("defaultState").style.display = "none";
        document.getElementById("function4State").style.display = "block";
    }

    function addCard() {
        // 添加卡片的逻辑，调用后端接口
    }

    function removeCard() {
        // 删除卡片的逻辑，调用后端接口
    }

    function enableAlarm() {
        // 开启警报
        alarmTriggered=true;
    }

    function disableAlarm() {
        // 关闭警报
        alarmTriggered=false;
    }

    function cancel() {
        document.getElementById("defaultState").style.display = "block";
        document.getElementById("function2State").style.display = "none";
        document.getElementById("function3State").style.display = "none";
        document.getElementById("function4State").style.display = "none";
    }
</script>
</body>
</html>